<template>
	<view class="findCases">
		<!-- 筛选区域 -->
		<view class="screen delUp" :class="isFixed ? 'fixed' : ''" v-if="params.cat_id == '0' || params.cat_id == '1'" 
			:style="{ top: top + 'rpx' }">
			<!-- 	全部：（类型、风格、年级、户型）
				家装：（类型、风格、年级、户型）
				公装：（类型、风格、造价） -->
			<up-dropdown ref="uDropdown" :show="isDropdownShow" @open="handleDropdownOpen" @close="handleDropdownClose" >
				<!-- 类型 -->
				<up-dropdown-item v-model="params.cat_id" :title="selectedCatLabel1" :options="catListData"
					@change="oncheck1" height="200"></up-dropdown-item>

				<!--家装 风格 -->
				<up-dropdown-item v-model="params.style_type" :title="selectedCatLabel2" :options="styleListData"
					@change="oncheck2" height="200" />

				<!--家装 面积 -->
				<up-dropdown-item v-model="params.area_range" :title="selectedCatLabel4" :options="areaListData"
					@change="oncheck4" height="200" />

				<!--家装 户型-->

				<up-dropdown-item v-model="params.room_type" :title="selectedCatLabel5" :options="roomListData"
					@change="oncheck5" height="200" />
			</up-dropdown>
		</view>

		<view class="screen delUp" v-else :class="isFixed ? 'fixed' : ''" :style="{ top: top + 'rpx' }">
			<up-dropdown>
				<!-- 类型 -->
				<up-dropdown-item v-model="params.cat_id" :title="selectedCatLabel1" :options="catListData"
					@change="oncheck1" height="200"></up-dropdown-item>

				<!--家装 风格 -->
				<up-dropdown-item v-model="params.style_type" :title="selectedCatLabel2" :options="styleListData"
					@change="oncheck2" height="200" />

				<!-- 造价 -->
				<up-dropdown-item v-model="params.price_range" :title="selectedCatLabel3" :options="priceListData"
					@change="oncheck3" height="200" />
			</up-dropdown>
		</view>

		<!-- 列表 -->
		<!-- 没有数据且未加载时的提示 -->
		<view class="nullData" v-if="arrList.length == 0 && !isLoading" :style="
        isFixed
          ? { 'padding-top': top + 120 + 'rpx' }
          : { 'padding-top': 0 + 'rpx' }
      ">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
			<text>暂无数据</text>
		</view>

		<!-- 数据列表 -->
		<view class="list" v-else :style="
        isFixed
          ? { 'padding-top': top + 180 + 'rpx' }
          : { 'padding-top': 0 + 'rpx' }
      ">
			<view class="waterfall">
				<view class="waterfall-column">
					<view class="card" v-for="(item, index) in leftList" :key="'left' + index"
						@click="onDetails(item.id)">
						<up-lazy-load :image="item.img" class="cover"></up-lazy-load>
						<view class="title">{{ item.title }}</view>
						<view class="tag">
							{{ item.type_text }}&nbsp;{{ item.area }}m²&nbsp;{{
                item.style_type_text
              }}
						</view>
					</view>
				</view>
				<view class="waterfall-column">
					<view class="card" v-for="(item, index) in rightList" :key="'right' + index"
						@click="onDetails(item.id)">
						<up-lazy-load :image="item.img" class="cover"></up-lazy-load>
						<view class="title">{{ item.title }}</view>
						<view class="tag">
							{{ item.type_text }}&nbsp;{{ item.area }}m²&nbsp;{{
                item.style_type_text
              }}
						</view>
					</view>
				</view>
			</view>

			<view v-if="isLoading" class="load-more-box">
				<text>加载中...</text>
			</view>

			<view v-if="!isLoading && !hasMoreData" class="load-more-box">
				<text>已经到底了</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		listData,
		cat_list,
		type_list
	} from "@/api/findCases.js";
	import {
		ref,
		onMounted,
		defineExpose,
		watch,
		defineProps
	} from "vue";
	// 类型
	const selectedCatLabel1 = ref("全部");
	const catListData = ref([]); // 类型数据
	const selectedCatLabel2 = ref("风格");
	const styleListData = ref([]);
	const selectedCatLabel3 = ref("造价");
	const priceListData = ref([]);
	const selectedCatLabel4 = ref("面积");
	const areaListData = ref([]);
	const selectedCatLabel5 = ref("户型");
	const roomListData = ref([]);
	const porps = defineProps({
		isFixed: Boolean,
		top: String,
	});

	// 数据列表、加载状态和分页参数
	const arrList = ref([]);
	const hasMoreData = ref(true); // 初始化为true，表示还有更多数据

	const pid = ref("0");

	const params = ref({
		title: "",
		cat_id: "0", // 分类id 1家装 2工装
		style_type: "0", // 风格
		room_type: "0", // 户型
		area_range: "0", // 面积区间
		price_range: "0", // 工程造价区间
		page: 1,
		page_size: 20,
	});

	const refresherTriggered = ref(false); // 初始化为false，触发下拉刷新
	const isLoading = ref(false); // 加载状态

	// 添加瀑布流数据列表
	const leftList = ref([]);
	const rightList = ref([]); // 初始化数据
	// ... existing code ...
	const isDropdownShow = ref(false); // 控制下拉菜单的显示状态

	const handleDropdownOpen = () => {
		isDropdownShow.value = true;
		// document.body.style.overflow = "hidden"; // 阻止页面滚动
	};

	const handleDropdownClose = () => {
		isDropdownShow.value = false;
		// document.body.style.overflow = "auto"; // 恢复页面滚动
	};
	onMounted(() => {
		queryTypeData();
		queryStatleData();
		queryList();
	});

	// 类型数据
	const queryTypeData = async () => {
		const res = await cat_list({
			pid: pid.value,
		});
		if (res.code === 1) {
			// catListData.value = res.data.list.map(item => ({
			// 	label: item.name,
			// 	value: item.id,
			// }));

			catListData.value = [{
					label: "全部",
					value: "0",
				},
				...res.data.list.map((item) => ({
					label: item.name,
					value: item.id,
				})),
			];
		}
	};

	// 风格、造价、面积和户型数据
	const queryStatleData = async () => {
		const res = await type_list({
			pid: pid.value,
		});
		if (res.code === 1) {
			styleListData.value = [{
					label: "全部",
					value: "0",
				},
				...res.data.style_list.map((item) => ({
					label: item.name,
					value: item.id,
				})),
			];

			priceListData.value = [{
					label: "全部",
					value: "0",
				},
				...res.data.price_list.map((item) => ({
					label: item.name,
					value: item.id,
				})),
			];

			areaListData.value = [{
					label: "全部",
					value: "0",
				},
				...res.data.area_list.map((item) => ({
					label: item.name,
					value: item.id,
				})),
			];

			roomListData.value = [{
					label: "全部",
					value: "0",
				},
				...res.data.room_list.map((item) => ({
					label: item.name,
					value: item.id,
				})),
			];
		}
	};

	// 筛选处理
	const handleCheck = (selectedValue, type, label, listData) => {
		// 重置筛选条件
		params.value.style_type = "0"; // 风格
		params.value.room_type = "0"; // 户型
		params.value.area_range = "0"; // 面积区间
		params.value.price_range = "0"; // 造价区间
		selectedCatLabel2.value = "风格";
		selectedCatLabel3.value = "造价";
		selectedCatLabel4.value = "面积";
		selectedCatLabel5.value = "户型";

		params.value[type] = String(selectedValue);
		const selectedItem = listData.value.find(
			(item) => item.value === selectedValue
		);
		label.value = selectedItem.label;
		// 重置
		params.value.page = 1;
		arrList.value = [];
		queryList();
		uni.pageScrollTo({
			scrollTop: 123, // 滚动到目标元素的顶部
			duration: 10 // 滚动动画时长，单位ms
		});
	};

	// 风格
	const oncheck1 = (selectedValue) =>
		handleCheck(selectedValue, "cat_id", selectedCatLabel1, catListData);
	// 户型
	const oncheck2 = (selectedValue) =>
		handleCheck(selectedValue, "style_type", selectedCatLabel2, styleListData);
	// 造价
	const oncheck3 = (selectedValue) =>
		handleCheck(selectedValue, "price_range", selectedCatLabel3, priceListData);
	// 面积
	const oncheck4 = (selectedValue) =>
		handleCheck(selectedValue, "area_range", selectedCatLabel4, areaListData);
	// 户型
	const oncheck5 = (selectedValue) =>
		handleCheck(selectedValue, "room_type", selectedCatLabel5, roomListData);

	// 请求数据列表
	const queryList = async () => {
		isLoading.value = true;
		try {
			const res = await listData(params.value);
			if (res.code === 1) {
				if (params.value.page === 1) {
					// 重置两列数据
					leftList.value = [];
					rightList.value = [];
					arrList.value = [];
				}

				// 处理新数据
				res.data.list.forEach((item, index) => {
					if (index % 2 === 0) {
						leftList.value.push(item);
					} else {
						rightList.value.push(item);
					}
				});

				// 更新原有数组(保持兼容)
				arrList.value = [...leftList.value, ...rightList.value];

				// 判断是否还有更多数据
				hasMoreData.value = res.data.list.length >= params.value.page_size;
				params.value.page += 1;
			}
		} catch (error) {
			console.error("请求数据失败:", error);
		} finally {
			setTimeout(() => {
				isLoading.value = false;
			}, 500);
		}
	};

	// 重置查询条件并重新加载数据
	const update = () => {
		params.value.title = "";
		params.value.cat_id = "";
		params.value.style_type = "";
		params.value.room_type = "";
		params.value.area_range = "";
		params.value.price_range = "";
		params.value.page = 1;
		queryList();
	};

	// 去详情
	const onDetails = (id) => {
		uni.navigateTo({
			url: "/pages/find/findCaseDetails/index?id=" + id,
		});
	};

	// 对外暴露方法
	defineExpose({
		queryList,
		params,
		update,
		hasMoreData,
	});
</script>

<style scoped lang="less">
	.fixed {
		position: fixed !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 999 !important;
		background-color: #fff;
	}

	
// :deep(.u-dropdown-content) {
//   z-index: 1001; /* 提高下拉内容的层级 */
//   height: 100rpx !important; /* 设置下拉内容的高度 */
//   overflow-y: auto; /* 允许内容滚动 */
// }
// 	// /* 调整遮罩层的样式 */
// 	:deep(.up-dropdown-mask) {
// 		z-index: 1000;
// 		/* 提高遮罩层的层级 */
// 		// pointer-events: auto !important;
// 		height: 100rpx !important;
// 		/* 允许遮罩层交互 */
// 		background-color: red !important;
// 		/* 添加半透明背景 */
// 	}
    
	// // /* 调整遮罩层的样式 */
	// :deep(.u-dropdown__content__mask) {
	//   z-index: 1 !important; /* 遮罩层在浮动层下方 */
	//   display: none !important;
	// }
	.findCases {
		width: 100%;
		height: 100%;

		.screen {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.nullData {
			height: calc(100% - 110rpx);
		}

		.list {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			.waterfall {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.waterfall-column {
					width: 49%;

					.card {
						margin-bottom: 20rpx;
						background-color: #fff;
						// overflow: hidden;

						.cover {
							width: 100%;
							display: block;
							background-color: #e4e4e4;
							border-radius: 12rpx;
							overflow: hidden;

							:deep(.u-lazy-item) {
								width: 100%;

								image {
									width: 100%;
									// object-fit: cover !important;
									background-color: #e4e4e4;
									// border-radius: 12rpx;
									// vertical-align: bottom; // 移除图片底部间隙
								}
							}
						}

						.title {
							width: 100%;
							padding: 16rpx;
							letter-spacing: 0.5px;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 1.4;
							// line-height: 30rpx;
							// display: -webkit-box;
							// -webkit-line-clamp: 2;
							// -webkit-box-orient: vertical;
							// overflow: hidden;
						}

						.tag {
							width: 100%;
							padding: 0 16rpx 16rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7a7a7a;
							line-height: 1.4;
							// display: -webkit-box;
							// -webkit-line-clamp: 2;
							// -webkit-box-orient: vertical;
							// overflow: hidden;
						}
					}
				}
			}
		}

		.load-more-box {
			text-align: center;
			width: 100%;
			padding: 20rpx 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			color: #7a7a7a;
		}
	}
</style>